import React, { Component } from 'react';
import { Button,List,WhiteSpace, WingBlank, PickerView, Icon, Badge } from 'antd-mobile';
import { PlusOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
import MyBadge from '../../components/myBadge/index'
import { connect } from 'react-redux';

class UserHeader extends Component {
    render() {
        const Item = List.Item
        const footerShowContent = [
            {
                name:'关注',
                num:0
            },
            {
                name: '粉丝',
                num: 0
            },
            {
                name: '帖子',
                num: 0
            }
        ]        
        console.log('username', this.props.state.data)
        let user = this.props.state.data
        let brandData

        if(user == null){
            user=''
            brandData = {
                userAnchorBrand:'',
                userAnchorMark: '',
                userStudyMark: ''
            }
        }else{
            brandData = {
                userAnchorBrand: user.userAnchorBrand,
                userAnchorMark: user.userAnchorMark,
                userStudyMark: user.userStudyMark
            }
        }
        

        return (
           <div>
                <List className="my-list">
                <WhiteSpace size='lg'></WhiteSpace>
                    <Item 
                    arrow="horizontal" 
                        thumb={<Avatar size={58} src={user.userImageUrl} ></Avatar>}
                    
                    >
                        <div style={{display:'flex',alignItems:'center'}}>
                            <MyBadge data={brandData}/>
                            <span style={{ marginLeft: '1.5vw',marginRight:'1.5vw' }}>{user.userName}</span>
                            {user.userSex === 0 ?
                                <svg t="1589812434394"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28299" width="15" height="15"><path d="M510.08 165.12c84.48 0 153.6 69.12 153.6 153.6s-69.12 153.6-153.6 153.6-153.6-69.12-153.6-153.6 68.48-153.6 153.6-153.6m0-102.4c-141.44 0-256 114.56-256 256s114.56 256 256 256 256-114.56 256-256-115.2-256-256-256z" fill="#FF5786" p-id="28300"></path><path d="M563.2 524.8H460.8v390.4h102.4V524.8z" fill="#FF5786" p-id="28301"></path><path d="M710.4 665.6H320v102.4h390.4v-102.4z" fill="#FF5786" p-id="28302"></path></svg>
                                :<svg t="1589812311463"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27467" width="12" height="12"><path d="M1024.039424 54.6816v-0.0512c0-1.024-0.1024-1.9456-0.1536-2.9184-0.0512-0.8192-0.0512-1.7408-0.1536-2.56-0.1024-1.024-0.3072-1.9456-0.4608-2.9696L1023.015424 44.4416V44.0832l-0.1024-0.3584c-0.2048-1.024-0.512-1.9968-0.768-2.9696l-0.5632-2.304-1.1264-3.072-0.3584-0.9216-0.2048-0.6144-0.1536-0.4096-1.4848-3.072-0.8192-1.6896c-0.512-1.024-1.1776-1.9968-1.792-2.9696l-0.512-0.8192-0.256-0.512-0.1536-0.2048-2.048-2.7648-1.1264-1.4848-2.2016-2.4576-1.28-1.4336-0.1024-0.0512V15.872L1007.860224 15.872c-0.6656-0.7168-1.3824-1.28-2.0992-1.9456-0.512-0.512-1.024-1.024-1.5872-1.4336l-2.3552-1.792-1.8432-1.3824a6.7584 6.7584 0 0 1-0.4096-0.256L998.900224 8.704a28.8768 28.8768 0 0 0-1.4336-0.8704l-1.9968-1.2288c-0.8192-0.512-1.7408-0.8704-2.6112-1.28l-2.1504-1.024-0.6144-0.2048-0.7168-0.3072-1.28-0.4608c-0.8192-0.256-1.536-0.6144-2.4064-0.8704-0.768-0.256-1.6384-0.4096-2.4576-0.6144L980.519424 1.1264 980.007424 1.024l-0.5632-0.1024a34.0992 34.0992 0 0 0-2.048-0.256c-0.768-0.1536-1.536-0.3072-2.2528-0.3584A54.016 54.016 0 0 0 969.511424 0h-0.1536l-431.3088 1.536a54.6816 54.6816 0 0 0-54.3744 54.9888c0 30.3104 24.4736 54.8352 54.5792 54.784h0.2048l299.6736-1.0752-197.0176 199.8336a392.4992 392.4992 0 0 0-244.0704-85.4016H391.719424C172.890624 227.6352-2.827776 409.2928 0.039424 629.6576 2.957824 847.0528 180.929024 1024 396.839424 1024h5.3248a392.96 392.96 0 0 0 279.0912-120.832 398.4384 398.4384 0 0 0 112.5376-284.0576 398.4384 398.4384 0 0 0-76.8512-230.1952l198.144-200.9088v301.1072c0 30.3104 24.3712 54.8864 54.4768 54.8864 30.1056 0 54.4768-24.576 54.4768-54.8864V54.6816z m-434.688 760.064A267.0592 267.0592 0 0 1 400.423424 896h-3.584c-146.2784 0-266.752-118.9888-268.7488-265.2672A269.1072 269.1072 0 0 1 393.306624 358.4h3.584c146.2784 0 266.8032 118.9888 268.7488 265.2672a266.9568 266.9568 0 0 1-76.288 191.0784z" fill="#409EFF" p-id="27468"></path></svg>
                            }
                        </div>
                    </Item>
                    <WhiteSpace></WhiteSpace>
                    <Item>
                    <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-around' }}>

                    {footerShowContent.map((v,index) =>{
                        return (
                            <div key={index} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
                                <span style={{ fontSize: '20px', fontWeight: 'bold' }}>{v.num}</span>
                                <p style={{ fontSize: '12px', color: '#888' }}>{v.name}</p>
                            </div>
                        )
                    })}
                    </div>
                    </Item>
                </List>
           </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        state: state.user
    }
}
const actionCreator = {  }
export default connect(mapStateToProps, actionCreator)(UserHeader);